<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="选择套餐" navbarType='0'></wlk-navbar>
        <view  v-if="!loading">
            <view class="pack pd30">
                <view class="head-title mb20">套餐选择</view>
                <view class="wd100 overHidden">
                    <u-scroll-list :indicator="false">
                        <view class="wlkflex" >
                            <view @click="radioClick(index)" :class="'overHidden pack-item br04 relative wlkflex '+[suitIndex==index?'active':'']" :style="suitIndex==index?'border-color:'+themeColor:''" v-for="(item, index) in line.suitinfo" :key="index">
                                <view class="wd100 center name" :style="suitIndex==index?'color:'+themeColor:'color:#999999'">
                                    {{item.name}}
                                </view>
                                <view class="active-icon" :style="{backgroundColor:themeColor}" v-if="suitIndex==index">
                                    <u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
                                </view>
                            </view>
                        </view>
                    </u-scroll-list>
                </view>
            </view>
            <u-gap height="8" bgColor="#F9F9F9"></u-gap>
            <view class="wlkflex justify-between day-title">
                <view class="title">出发日期</view>
                <view class="desc" v-if="line.linebefore>0">*建议提前<text :style="{color:themeColor}">{{line.linebefore}}</text>天预订</view>
            </view>
            <wlk-calendar @selectedDate="calculate" :priceIndex="priceIndex" :tabs="calendarTabs" :list="calendarList"></wlk-calendar>
            <view class="order-box" v-if="calendarList && !$u.test.isEmpty(calendarList)">
                <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                <view class="title">出行人数</view>
                <view class="order-info">
                    <block v-if="!$u.test.isEmpty(selectedDate)">
                        <u-cell-group :border="false" >
                            <u-cell
                                    :border="false"
                                    v-if="selectedDate.price>0"
                            >
                                <view slot="title" class="wlkflex">
                                    <view class="step-title wlkflex">
                                        <view class="mr10">成人</view>
                                        <u-icon v-if="line.suitinfo[suitIndex].person" @click="Tip('adult')" name="info-circle" color="#999" size="15"></u-icon>
                                    </view>
                                    <view class="ml15 price">
                                        <text>￥{{selectedDate.price}}</text><text class="col9">/人</text>
                                    </view>
                                </view>
                                <u-number-box
                                        slot="right-icon"
                                        v-model="orderInfo.adult_num"
                                        step="1"
                                        disabledInput
                                        :min="adult_min"
                                        name="adult_num"
                                        :max="selectedDate.stock==-1?max_num:selectedDate.stock-orderInfo.elder_num-orderInfo.child_num"
                                        @change="changeNum"
                                >
                                </u-number-box>
                            </u-cell>
                            <u-cell
                                    :border="false"
                                    v-if="selectedDate.elderprice>0"
                            >
                                <view slot="title" class="wlkflex">
                                    <view class="step-title wlkflex">
                                        <view class="mr10">老人</view>
                                        <u-icon v-if="line.suitinfo[suitIndex].oldperson" @click="Tip('old')" name="info-circle" color="#999" size="15"></u-icon>
                                    </view>
                                    <view class="ml15 price">
                                        <text>￥{{selectedDate.elderprice}}</text><text class="col9">/人</text>
                                    </view>
                                </view>
                                <u-number-box
                                        slot="right-icon"
                                        v-model="orderInfo.elder_num"
                                        step="1"
                                        :min="elder_min"
                                        name="elder_num"
                                        :max="selectedDate.stock==-1?max_num:selectedDate.stock-orderInfo.adult_num-orderInfo.child_num"
                                        disabledInput
                                        @change="changeNum"
                                >
                                </u-number-box>
                            </u-cell>
                            <u-cell
                                    :border="false"
                                    v-if="selectedDate.childprice>0"
                            >
                                <view slot="title" class="wlkflex">
                                    <view class="step-title wlkflex">
                                        <view class="mr10">儿童</view>
                                        <u-icon v-if="line.suitinfo[suitIndex].child"  @click="Tip('child')" name="info-circle" color="#999" size="15"></u-icon>
                                    </view>
                                    <view class="ml15 price">
                                        <text>￥{{selectedDate.childprice}}</text><text class="col9">/人</text>
                                    </view>
                                </view>
                                <u-number-box
                                        slot="right-icon"
                                        v-model="orderInfo.child_num"
                                        step="1"
                                        :min="child_min"
                                        name="child_num"
                                        :max="selectedDate.stock==-1?max_num:selectedDate.stock-orderInfo.adult_num-orderInfo.elder_num"
                                        disabledInput
                                        @change="changeNum"
                                >
                                </u-number-box>
                            </u-cell>
                        </u-cell-group>
                        <block v-if="selectedDate.roomblance && selectedDate.roomblance>0">
                            <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                            <view class="title">单房差</view>
                            <u-cell-group :border="false" >
                                <u-cell
                                        :border="false"
                                >
                                    <view slot="title" class="wlkflex">
                                        <view class="step-title wlkflex">
                                            <view class="mr10">购买单房差</view>
                                            <u-icon v-if="line.suitinfo[suitIndex].room" @click="Tip('room')" name="info-circle" color="#999" size="15"></u-icon>
                                        </view>
                                        <view class="ml15 price">
                                            <text>￥{{selectedDate.roomblance}}</text><text class="col9">/份</text>
                                        </view>
                                    </view>
                                    <u-number-box
                                            slot="right-icon"
                                            v-model="orderInfo.room_num"
                                            step="1"
                                            :min="room_min"
                                            :max="room_max"
                                            disabledInput
                                            @change="changeRoom"
                                    >
                                    </u-number-box>
                                </u-cell>
                            </u-cell-group>
                        </block>
                        <block v-if="!$u.test.isEmpty(line.insuranceinfo)">
                            <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                            <view class="title">保险</view>
                            <view class="alert br08">我们十分关心您的出行安全：建议像大部分旅客一样选购旅游保险，以保障您的权益与出行安全</view>
                            <view class="pd030 pb20">
                                <view class="wlkflex justify-between insurance" @click="checkboxChange(item)" v-for="(item,index) in line.insuranceinfo">
                                    <view class="insurance-icon">
                                        <view class="icon-wrap wlkflex justify-center" :style="{backgroundColor: insurances.indexOf(item)===-1?'#FFFFFF':themeColor,borderColor:insurances.indexOf(item)===-1?'#c8c9cc':themeColor}">
                                            <u-icon name="checkbox-mark" size="12" color="#FFFFFF" v-if="insurances.indexOf(item)!==-1"></u-icon>
                                        </view>
                                    </view>

                                    <view class="insurance-title u-line-2">
                                        {{item.name}}
                                    </view>
                                    <view class="insurance-price">
                                        <view class="price">¥{{item.price}} <text class="col9">/人/天</text> </view>
                                        <view class="col9 wlkflex justify-end" @tap.stop="tipInsurance(index)">
                                            <view>详情</view>
                                            <u-icon name="arrow-right" size="12" color="#999"></u-icon>
                                        </view>
                                    </view>
                                </view>
                            </view>
                        </block>
                        <block v-if="!$u.test.isEmpty(line.site_ids)">
                            <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                            <view class="title mb20">上车地点</view>
                            <view class="pd030 wlkflex wrap">
                                 <view @click="siteClick(index)" :class="'overHidden mt20 site-item br04 relative wlkflex '+[siteIndex==index?'active':'']" :style="siteIndex==index?'border-color:'+themeColor:''" v-for="(item, index) in line.site_ids" :key="index">
                                     <view class="wd100 center name" :style="siteIndex==index?'color:'+themeColor:'color:#999999'">
                                         {{item.name}}
                                     </view>
                                     <view class="active-icon" :style="{backgroundColor:themeColor}" v-if="siteIndex==index">
                                         <u-icon size="12" name="checkmark" color="#FFFFFF"></u-icon>
                                     </view>
                                 </view>
                            </view>
                        </block>
                        <block v-if="!$u.test.isEmpty(selectedDate.bxinfo)">
                            <u-gap height="8" bgColor="#F9F9F9"></u-gap>
                            <view class="title">必消项目</view>
                            <view class="pd030 pb20 ">
                                <view v-for="(bxInfo,index) in selectedDate.bxinfo" class="wlkflex justify-between bxinfo">
                                    <view class="u-line-2">{{bxInfo.name}}</view>
                                    <view class="price">¥{{bxInfo.price}}</view>
                                </view>
                            </view>
                        </block>
                    </block>
                    <block v-else>
                        <view class="mt20 mb20">
                            <u-empty
                                    iconSize="60"
                                    text="请先选择出发日期"
                            >
                            </u-empty>
                        </view>
                    </block>

                </view>
            </view>
        </view>
        <view class="fixed-buy-btn wd100 wlkflex justify-between">
            <view class="calculate-info wlkflex">
                <block v-if="orderInfo.total_price>0">
                    <view class="bz">总价：</view>
                    <view class="price">￥{{orderInfo.total_price}}</view>
                    <view class="ml10">
                        <u-icon :name="showItem?'arrow-down':'arrow-up'" @click="setShowItem" size="10" color="#999"></u-icon>
                    </view>
                </block>
            </view>
            <view class="buy-btn">
                <u-button :customStyle="{
                    fontWeight: 'bold',
                    height:'90rpx'
                }" :color="themeColor" size="large" :disabled="!orderInfo.total_price>0" shape="circle" @click="next()" text="下一步"></u-button>
            </view>
        </view>
        <u-action-sheet
                :show="tipInfo.show"
                @close="tipInfo.show = false"
                :title="tipInfo.title"
                :round="10"
                closeOnClickOverlay
                safeAreaInsetBottom
        >
            <view class="tip-content">{{tipInfo.content}}</view>
        </u-action-sheet>
        <u-action-sheet
                :show="tipInsuranceInfo.show"
                @close="tipInsuranceInfo.show = false"
                :title="tipInsuranceInfo.title"
                :round="10"
                closeOnClickOverlay
                safeAreaInsetBottom
        >
            <scroll-view class="tip-content" scroll-y>
                <view class="pt20 pb20 head-info">
                    <view v-if="!$u.test.isEmpty(tipInsuranceInfo.content.age_range)">
                        <text>承保年龄</text>
                        <text class="ml20">{{tipInsuranceInfo.content.age_range}}</text>
                    </view>
                    <view class="mt10" v-if="!$u.test.isEmpty(tipInsuranceInfo.content.usetime)">
                        <text>保障时间</text>
                        <text class="ml20">{{tipInsuranceInfo.content.usetime}}</text>
                    </view>
                </view>
                <view class="pt20 pb20 nav-info" v-if="!$u.test.isEmpty(tipInsuranceInfo.content.iteminfo)">
                    <view class="center bold">保险项目及保险额度</view>
                    <view v-for="(item,index) in tipInsuranceInfo.content.iteminfo">
                        <view  class="mt20 item-title">{{item.name}}</view>
                        <view v-for="(v,k) in item.infos" class="wlkflex justify-between mt10 col9">
                            <view class="left">{{v.name}}</view>
                            <view class="right">{{v.price}}元</view>
                        </view>
                    </view>
                </view>
                <view class="pt20 pb20" v-if="!$u.test.isEmpty(tipInsuranceInfo.content.content)">
                    <view class="center bold">详情</view>
                    <view class="mt20">
                        <u-parse :content="tipInsuranceInfo.content.content"></u-parse>
                    </view>
                </view>
            </scroll-view>
        </u-action-sheet>
        <u-popup safeAreaInsetBottom  :show="showItem" closeable @close="showItem=false" round="20">
            <view class="order-item">
                <view class="pd30">
                    <view class="center title">价格明细</view>
                    <view class="item-info">
                        <view class="info-flex wlkflex justify-between mt40">
                            <view class="info-head">基本团费</view>
                            <view class="info-price">￥{{orderInfo.base_price}}</view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.adult_num>0">
                            <view class="info-desc col9">成人</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{selectedDate.price}}
                                </text>
                                <text class="ml05">
                                    x{{orderInfo.adult_num}}人
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.elder_num>0">
                            <view class="info-desc col9">老人</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{selectedDate.elderprice}}
                                </text>
                                <text class="ml05">
                                    x{{orderInfo.elder_num}}人
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.child_num>0">
                            <view class="info-desc col9">儿童</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{selectedDate.childprice}}
                                </text>
                                <text class="ml05">
                                    x{{orderInfo.child_num}}人
                                </text>
                            </view>
                        </view>
                        <view class="info-flex wlkflex justify-between mt10" v-if="orderInfo.room_num>0">
                            <view class="info-desc col9">单房差</view>
                            <view class="info-desc-price col9">
                                <text>
                                    ￥{{selectedDate.roomblance}}
                                </text>
                                <text class="ml05">
                                    x{{orderInfo.room_num}}份
                                </text>
                            </view>
                        </view>
                        <block  v-if="orderInfo.insurances_price>0">
                            <view class="info-flex wlkflex justify-between mt30">
                                <view class="info-head">保险费用</view>
                                <view class="info-price">￥{{orderInfo.insurances_price}}</view>
                            </view>
                            <view class="info-flex wlkflex justify-between mt10" v-for="(item,index) in insurances">
                                <view class="info-desc col9">{{item.name}}</view>
                                <view class="info-desc-price col9">
                                    <text>
                                        ￥{{item.price}}
                                    </text>
                                    <text class="ml05">
                                        x{{orderInfo.total_people}}份x{{line.lineday}}天
                                    </text>
                                </view>
                            </view>
                        </block>
                        <block v-if="!$u.test.isEmpty(selectedDate.bxinfo)">
                            <view class="info-flex wlkflex justify-between mt30">
                                <view class="info-head">必消项目</view>
                                <view class="info-price">￥{{orderInfo.bx_price}}</view>
                            </view>
                            <view class="info-flex wlkflex justify-between mt10" v-for="(item,index) in selectedDate.bxinfo">
                                <view class="info-desc col9">{{item.name}}</view>
                                <view class="info-desc-price col9">
                                    <text>
                                        ￥{{item.price}}
                                    </text>
                                    <text class="ml05">
                                        x{{orderInfo.total_people}}人
                                    </text>
                                </view>
                            </view>
                        </block>
                    </view>
                </view>
            </view>
        </u-popup>
  </view>
</template>

<script>
    import { formatRichText } from '@/wlkutils/tools';
    import { cal } from '@/wlkutils/cal'
    import { mapGetters } from 'vuex';
    var _self;
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin'])
        },
        data() {
            return {
                id:'',
                line:{},
                loading:true,
                suitIndex:0,
                siteIndex:0,
                priceIndex:'',
                orderInfo:{
                    adult_num:0,
                    elder_num:0,
                    child_num:0,
                    room_num:0,
                    total_price:0,
                    adult_price:0,
                    elder_price:0,
                    child_price:0,
                    room_price:0,
                    base_price:0,
                    insurances_price:0,
                    total_people:0,
                    bx_price:0,
                },
                orderInfoInit:{
                    adult_num:0,
                    elder_num:0,
                    child_num:0,
                    room_num:0,
                    total_price:0,
                    adult_price:0,
                    elder_price:0,
                    child_price:0,
                    room_price:0,
                    base_price:0,
                    insurances_price:0,
                    total_people:0,
                    bx_price:0,
                },
                selectedDate:{},
                tipInsuranceInfo:{
                    show:false,
                    title:'',
                    content:'',
                },
                tipInfo:{
                    show:false,
                    title:'',
                    content:'',
                },
                room_min:0,//最小单房差
                room_max:0,//最大单房差
                adult_min:0,
                elder_min:0,
                child_min:0,
                insurances:[],
                showItem:false,
                calendarList:{},
                calendarTabs:{},
                max_num:Number.MAX_SAFE_INTEGER
            };
        },
        onLoad() {
            _self = this;
            _self.id = this.$Route.query.id;
            _self.suitIndex = this.$Route.query.suitIndex??0;
            _self.priceIndex = this.$Route.query.priceIndex??'';
            this.getData();
        },
        onShow() {

        },
        methods: {
            setShowItem(){
              this.showItem = !this.showItem;
            },
            checkboxChange(n) {
                var index = this.insurances.indexOf(n);
                if(index === -1){
                    this.insurances.push(n);
                }else{
                    this.insurances.splice(index,1);
                }
                this.calculateTotalPrice();
            },
            tipInsurance(index){
              this.tipInsuranceInfo.title = this.line.insuranceinfo[index].name;
              this.tipInsuranceInfo.content = this.line.insuranceinfo[index];
              this.tipInsuranceInfo.content.content = formatRichText(this.tipInsuranceInfo.content.content);
              this.tipInsuranceInfo.show = true;

            },
            //切换套餐
            radioClick(index) {
                this.suitIndex = index;
                _self.calendarList =  _self.line.suitinfo[index].groupsDay??{};
                _self.calendarTabs =  _self.line.suitinfo[index].tabs??{};
                this.priceIndex = '';
                this.selectedDate = {};
                this.insurances = [];
                this.calculateTotalPrice();
            },
            //切换上车点
            siteClick(index){
                this.siteIndex = index;
            },
            Tip(type){
                switch (type) {
                    case 'adult':
                        this.tipInfo.title = '成人标准';
                        this.tipInfo.content = this.line.suitinfo[this.suitIndex].person;
                        break;
                    case 'old':
                        this.tipInfo.title = '老人标准';
                        this.tipInfo.content = this.line.suitinfo[this.suitIndex].oldperson;
                        break;
                    case 'child':
                        this.tipInfo.title = '儿童标准';
                        this.tipInfo.content = this.line.suitinfo[this.suitIndex].child;
                        break;
                    case    'room':
                        this.tipInfo.title = '单房差说明';
                        this.tipInfo.content = this.line.suitinfo[this.suitIndex].room;
                        break;
                }
                this.tipInfo.show = true;
            },
            getData() {
                _self.loading = true;
                uni.$u.http.post('line/getDetail', {
                    id:_self.id
                }).then(res => {
                    _self.line = res.data.line;
                    if(_self.line.suitinfo.length>0){
                        _self.line.suitinfo.forEach(function (v,k) {
                            let result = _self.line.suitinfo[k].priceinfo.length>0? _self.groupsDay(_self.line.suitinfo[k]):[];
                            _self.line.suitinfo[k].groupsDay = result.groupsDay;
                            _self.line.suitinfo[k].tabs = result.tabs;
                        })
                        _self.calendarList = _self.line.suitinfo[_self.suitIndex].groupsDay;
                        _self.calendarTabs =_self.line.suitinfo[_self.suitIndex].tabs;
                    }
                    _self.loading = false;
                }).catch(res => {

                })
            },
            groupsDay(data){
                const groupedData = data.priceinfo.reduce((groups, item) => {
                    const timeStr = item.date.toString(); // 将时间转换为字符串
                    const year = timeStr.substr(0, 4); // 提取年份
                    const month = timeStr.substr(5, 2); // 提取月份
                    const key = `${year}-${month}`; // 以年-月作为分组的键
                    if (!groups[key]) {
                        groups[key] = []; // 创建新的分组数组
                    }
                    groups[key].push(item); // 添加对象到对应的分组数组
                    return groups;
                }, {});
                var tabs = new Array();
                for (var year in groupedData) {
                    let obj = new Object();
                    obj.name = year.substr(5, 2)+'月';
                    obj.date = year;
                    obj.id = data.id;//套餐id
                    obj.lineid = data.lineid;//线路id
                    if(!tabs[year]){
                        tabs[year] = [];
                    }
                    tabs[year] = obj;
                }
                let result = new Object();
                result.tabs = Object.values(tabs);
                result.groupsDay = groupedData;
                return result;
            },
            calculate(date){
                this.selectedDate = date;
                this.insurances = [];
                this.orderInfo = JSON.parse(JSON.stringify(this.orderInfoInit));
                this.adult_min = 0;
                this.elder_min = 0;
                this.child_min = 0;
                //赋值默认出行人数
                if(!uni.$u.test.isEmpty(this.selectedDate)){
                    if(this.selectedDate.price>0){
                        this.orderInfo.adult_num = 1;
                        this.adult_min = 1;
                    }else if (this.selectedDate.elderprice>0){
                        this.orderInfo.elder_num = 1;
                        this.elder_min = 1;
                    }else if (this.selectedDate.childprice>0){
                        this.orderInfo.child_num = 1;
                        this.child_min = 1;
                    }
                    this.calcRoom();
                }
                this.calculateTotalPrice();
            },
            //计算单房差
            calcRoom(){
                if(this.selectedDate.roomblance>0){
                    //查询参与计算单房差的人群
                    var calc_num = 0;
                    this.selectedDate.roomcount.forEach(function (v,k) {
                        switch (v) {
                            case 'adult':
                                calc_num+=_self.orderInfo.adult_num;
                                break;
                            case 'elder':
                                calc_num+=_self.orderInfo.elder_num;
                                break;
                            case 'child':
                                calc_num+=_self.orderInfo.child_num;
                                break;
                        }
                    });
                    //最小值
                    if(calc_num % 2 === 0){
                        this.orderInfo.room_num = 0;
                        this.room_min = 0;
                    }else{
                        this.orderInfo.room_num = 1;
                        this.room_min = 1;
                    }
                    //最大值
                    this.room_max = calc_num;
                }
            },
            //单房差变动
            changeRoom(e){
                this.orderInfo.room_num = e.value;
                this.calculateTotalPrice();
            },
            //出行人数变动
            changeNum(e){
                this.orderInfo[e.name] = e.value;
                this.calcRoom();
                this.calculateTotalPrice();
            },
            //计算总价
            calculateTotalPrice(){
                this.orderInfo.total_price = 0;
                if(!uni.$u.test.isEmpty(this.selectedDate)){
                    this.orderInfo.total_people = cal.jia(this.orderInfo.adult_num,this.orderInfo.elder_num,this.orderInfo.child_num);//总人数
                    this.orderInfo.adult_price = cal.cheng(this.orderInfo.adult_num,this.selectedDate.price);
                    this.orderInfo.elder_price = cal.cheng(this.orderInfo.elder_num,this.selectedDate.elderprice);
                    this.orderInfo.child_price = cal.cheng(this.orderInfo.child_num,this.selectedDate.childprice);
                    this.orderInfo.room_price = cal.cheng(this.orderInfo.room_num,this.selectedDate.roomblance);//单房差
                    this.orderInfo.base_price  = cal.jia(this.orderInfo.adult_price,this.orderInfo.elder_price,this.orderInfo.child_price,this.orderInfo.room_price);//基本费用
                    //保险
                    var insurances_price = 0;
                    this.insurances.forEach(function (v) {
                        insurances_price +=  cal.cheng( v.price,_self.line.lineday);
                    });
                    //保险金额*总人数*线路线路
                    this.orderInfo.insurances_price = cal.cheng( insurances_price,this.orderInfo.total_people);
                    //必消
                    var bx_price = 0;
                    this.selectedDate.bxinfo.forEach(function (b) {
                        bx_price = cal.jia(bx_price,b.price);
                    });
                    this.orderInfo.bx_price = cal.cheng( bx_price,this.orderInfo.total_people);
                    this.orderInfo.total_price = cal.jia(this.orderInfo.adult_price,this.orderInfo.elder_price,this.orderInfo.child_price,this.orderInfo.room_price,this.orderInfo.insurances_price,this.orderInfo.bx_price);
                }
            },
            next(){
               let obj = new Object();
                obj.id = _self.id;
                obj.suitid = _self.selectedDate.suitid;
                const insurance_ids = this.insurances.map(obj => obj.id);
                obj.insurance_ids = insurance_ids.join(',');
                obj.selected_id = _self.selectedDate.id;
                if (!uni.$u.test.isEmpty(_self.line.site_ids)) {
                    obj.site_id = _self.line.site_ids[_self.siteIndex].id;
                }
                const query = Object.assign({}, _self.orderInfo, obj);
                this.$Router.push({
                    path: '/pages/line/create',
                    query: query
                });
            }
        },
    };
</script>

<style lang="scss">
    page{
        background-color: #FFFFFF!important;
        padding-bottom: 150rpx;
        .head-title{
            font-size: 29rpx;
            font-weight: bold;
        }
        .day-title{
            padding: 30rpx 30rpx 20rpx 30rpx;
            .title{
                font-size: 29rpx;
                font-weight: bold;
            }
            .desc{
                font-size: $font-sm;
                color: $uni-text-color-grey;

            }
        }
        .active-icon{
            padding: 5rpx 0rpx 0 5rpx;
            border-radius: 8px 0 0px 0;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        .pack{
            .pack-item{
                min-width: 200rpx;
                background-color: #f3f8fe;
                margin: 10rpx;
                height: 90rpx;
                border: 1px solid #f3f3f3;
                padding: 0 10rpx;
                .name{
                    font-size: $font-lt;
                }
            }
            .active{
      /*          border-bottom: 10rpx solid;
                min-width: 210rpx;
                height: 100rpx;*/
              box-shadow:0 2px 4px rgba(0,0,0,.06);
            }
        }
        .order-box{
            .title{
                font-size: 29rpx;
                font-weight: bold;
                padding: 30rpx 30rpx 0 30rpx;
            }
            .order-info{
                padding: 0;
                .price{
                    color: $-tour-price-color;
                }
            }
            .step-title{
                font-size: $font-base;
                margin-right: 20rpx;
            }
            .alert{
                width: 95%;
                margin: 20rpx auto 0 auto;
                padding: 20rpx;
                background-color: #fff9f1;
                color: #b69977;
                font-size: $font-base;
            }
            .insurance{
                    padding: 20rpx 0;
                    font-size: $font-base;
                    border-bottom: 1px solid #eaebec;
                    .insurance-icon{
                        width: 10%;
                        .icon-wrap{
                            width: 36rpx;
                            height: 36rpx;
                            border:1px solid #c8c9cc;
                            border-radius: 3px;
                            transition-duration: 0.2s;
                        }
                    }

                    .insurance-title{
                        width: 70%;
                    }
                    .insurance-price{
                        width: 22%;
                        text-align: right;
                        .price{
                            font-size: $font-lt;
                        }
                        .bz{

                        }
                    }
                }

            .bxinfo{
                padding: 30rpx 0;
                font-size: $font-base;
                border-bottom: 1px solid #eaebec;
                .price{
                   font-size: $font-lt;
                }

            }
            .site-item{
                width: 200rpx;
                background-color: #FFFFFF;
                margin: 10rpx;
                height: 90rpx;
                border: 1px solid $border-color-dark;
                .name{
                    font-size: $font-lt;
                }
            }
            .active{
                /*border-bottom: 10rpx solid;*/
               /* width: 210rpx;
                height: 100rpx;*/
              box-shadow:0 2px 4px rgba(0,0,0,.06);
            }

        }
        .tip-content{
            text-align: left;
            padding: 30rpx;
            height: 900rpx;
            font-size: $font-base;
            .head-info{
                border-bottom: 1px solid #eaebec;
            }
            .nav-info{
                border-bottom: 1px solid #eaebec;
                .left{
                    width: 70%;
                }
                .right{
                    width: 28%;
                }
            }
            .item-title{
                color: #666666;
                font-weight: bold
            }
        }
        .fixed-buy-btn{
            position: fixed;
            z-index: 10076;
            padding: 20rpx 30rpx;
            background-color: #FFFFFF;
            bottom: 0;
            box-shadow: 0px -5px 5px rgba(0, 0, 0, 0.1);
            .calculate-info{
                width: 50%;
                font-size: $font-lt;
                .bz{
                }
                .price{
                    font-size: $font-max;
                    color: $-tour-price-color;
                }
            }
            .buy-btn{
                width: 40%;
            }
        }
        .order-item{
            padding-bottom: 150rpx;
            min-height: 800rpx;
            .title{
                font-size: $font-lg;
                color: $uni-text-color;
                font-weight: bold;
            }
            .item-info{
                font-size: $font-lt;
                .info-flex{
                    .info-head{
                        font-size: $font-base;
                        font-weight: bold;
                    }
                    .info-desc{
                        font-size: $font-sm;
                    }
                    .info-price{
                        font-size: $font-base;
                        color: $-tour-price-color;
                    }
                    .info-desc-price{
                        font-size: $font-sm;
                    }
                }
            }
        }
    }

</style>
